<div class="gf-form-group gf-form-group--header" id="dns">
  <div class="wp-config-box--hit-area" ng-click="ctrl.showDNS = !ctrl.showDNS">
    <div class="playlist-column-header section-header-flex-container">
      <h3 class="page-headering">DNS</h3>
      <div>
        <a href="#">
          <!-- Monitoring -->
          <i class="icon-gf icon-gf-monitoring-tiny" style="font-size:17px; vertical-align: text-bottom;" ng-show="ctrl.checks['dns'].enabled"></i>
          <span class="freqMsg" ng-show="ctrl.checks['dns'].enabled" > Every {{ctrl.checks['dns'].frequency}}s from {{ctrl.probeCount(ctrl.checks['dns'])}} {{ctrl.probeCount(ctrl.checks['dns']) == 1 ? "Probe" : "Probes"}} |</span>
          <i class="icon-gf icon-gf-monitoring-tiny" style="font-size:17px; vertical-align: text-bottom;"ng-show="!ctrl.checks['dns'].enabled"></i>
          <span class="freqMsg disabled" ng-show="!ctrl.checks['dns'].enabled" > Not enabled |</span>
          <span class="freqMsg" ng-show="!ctrl.checks['dns'].enabled && ctrl.discovered" > Not Discovered |</span>
          <!-- Checks -->
          <i ng-show="ctrl.checks['dns'].enabled" class="icon-gf icon-gf-status" style="font-size:17px; vertical-align: sub;"></i>
          <span ng-show="ctrl.checks['dns'].enabled" class="freqMsg" bs-tooltip="'Estimated checks per month, in Millions'"> {{ctrl.totalChecks(ctrl.checks['dns'])| number:1}}M/mo</span><span ng-show="ctrl.checks['dns'].enabled" class="freqMsg"> |</span
          <!-- Configure -->
          <span class="highlight-word"> Configure</span>
          <span><i class="fa fa-caret-down" ng-show="ctrl.showDNS"></i></span>
          <span><i class="fa fa-caret-right rt-box-accordian-control" ng-hide="ctrl.showDNS"></i></span>
        </a>
      </div>
    </div>
  </div>

  <div class="wp-config-box rt-page-box" id="dns" ng-class="{ 'dns-open': ctrl.showDNS }">
    <div>
        <div class="gf-form">
          <i class="icon-gf icon-gf-monitoring inline-icon"></i>
          <h3 class="inline-header">Monitoring</h3>
          <editor-checkbox text="Enabled" model="ctrl.checks['dns'].enabled"></editor-checkbox>
        </div>
        <div class="endpoint-config-left-margin">
          <p>We do a single DNS lookup at the specified <span class="emphasis-word">frequency</span>, on the <span class="emphasis-word">DNS servers</span>, from the selected <span class="emphasis-word">dynamic or static footprint</span>. If one fails, we will move on to the next, just like DNS works in the real world.</p>
          <div class="gf-form-group">
            <div class="gf-form">
              <span class="gf-form-label width-9">Frequency</span>
              <div class="gf-form-select-wrapper">
                <select class="gf-form-input gf-size-auto" ng-model="ctrl.checks['dns'].frequency" ng-options="f.value as f.label for f in ctrl.frequencyOpts"></select>
              </div>
            </div>
            <endpoint-probe-select model="ctrl.checks['dns']" probes="ctrl.probes" style="modal-collector-select"></endpoint-probe-select>
          </div>



          <div class="gf-form-group">
            <div class="gf-form">
              <label class="gf-form-label width-9">Hostname</label>
              <input class="gf-form-input max-width-21" type="text" ng-model="ctrl.checks['dns'].settings.name" placeholder="www.example.com">
            </div>
            <div class="gf-form">
              <label class="gf-form-label width-9">Timeout (s)</label>
              <input class="gf-form-input max-width-5" type="number" ng-model="ctrl.checks['dns'].settings.timeout" min="1" max="10">
              <i class="fa fa-info-circle" bs-tooltip="'The timeout, in seconds, is the amount of time our probe will wait for a response.'" />
            </div>
            <div class="gf-form gf-form--v-stretch">
              <label class="gf-form-label width-9">DNS Servers</label>
              <textarea class="gf-form-input max-width-30" type="textarea" ng-model="ctrl.checks['dns'].settings.server"></textarea>
              <i class="fa fa-info-circle" bs-tooltip="'Comma separated list of servers to try until a successful result is received.'" />
            </div>
          </div>
          <div class="gf-form-group">
            <div class="gf-form-inline max-width-37">
              <div class="gf-form max-width-17">
                <label class="gf-form-label width-9">Record Type</label>
                <div class="gf-form-select-wrapper">
                  <select class="gf-form-input gf-size-auto" ng-model="ctrl.checks['dns'].settings.type" ng-options="r for r in ['A', 'AAAA', 'CNAME','MX','NS','PTR','SOA','SRV','TXT']"></select>
                </div>
              </div>
              <div class="gf-form max-width-9">
                <label class="gf-form-label width-4">Port</label>
                <input class="gf-form-input max-width-4" type="number" ng-model="ctrl.checks['dns'].settings.port" min="1" max="65535">
              </div>
              <div class="gf-form max-width-9">
                <label class="gf-form-label width-9">Protocol</label>
                <div class="gf-form-select-wrapper">
                  <select class="gf-form-input gf-size-auto" ng-model="ctrl.checks['dns'].settings.protocol" ng-options="p for p in ['udp', 'tcp']"></select>
                </div>
              </div>
            </div>
            <div class="gf-form-inline">
              <div class="gf-form">
                <label class="gf-form-label width-9">Content Match</label>
                <input class="gf-form-input width-25" type="text" ng-model="ctrl.checks['dns'].settings.expectRegex">
                <i class="fa fa-info-circle" bs-tooltip="'Content Match checks to see if your string occurs in the answers returned. Pro-tip: Regex is supported.  Wrap the expression in !\'s to invert the match.'" />
              </div>
            </div>
          </div>
          <div class="gf-form-group" ng-show="ctrl.checks['dns'].enabled">
            <div class="rt-body-copy">
              <span class="pluginlist-none-installed" style="margin: 0;"><i class="icon-gf icon-gf-status wp-icon-medium"></i> This DNS monitor will generate approximately <span class="wp-note--mild-emphasis">{{ctrl.totalChecks(ctrl.checks['dns'])| number:1}} Million</span><span class="pluginlist-none-installed"> checks per month.</span>
            </div>
          </div>
        </div>

      <div class="gf-form-group">
        <div>
          <i class="icon-gf icon-gf-online inline-icon"></i>
          <h3 class="inline-header">Health</h3>
        </div>
        <div class="endpoint-config-left-margin">
          <div class="rt-box-interior-content" style="margin-top: 10px;">
            <div class="rt-body-copy">
              <span class="rt-body-copy" style="margin: 0;">If</span>
              <div class="rt-input-styles editor-option">
                <label><input type="number" min="1" value="3"class="gf-form-natural-language-input max-width-3" ng-model="ctrl.checks['dns'].healthSettings.num_collectors"></select></label>
              </div>
              <span class="rt-body-copy">or more probes report <span class="emphasis-word">connection errors</span> for</span>
              <div class="rt-input-styles editor-option">
                <label><input type="number" min="1" value="5" class="gf-form-natural-language-input max-width-3" ng-model="ctrl.checks['dns'].healthSettings.steps"></select></label>
              </div>
              <span class="rt-body-copy">or more consecutive checks, health will be marked as down <img width="20px" height="20px" src="public/plugins/raintank-worldping-app/img/critical.svg" class="rt-inline-health-icon">.</span>
            </div>
          </div>
        </div>
      </div>

      <div class="gf-form-group">
        <div class="gf-form">
          <i class="icon-gf icon-gf-alert inline-icon"></i>
          <h3 class="inline-header">Alerting</h3>
          <editor-checkbox text="Enabled" model="ctrl.checks['dns'].healthSettings.notifications.enabled"></editor-checkbox>
        </div>
        <div class="endpoint-config-left-margin">
          <div class="rt-box-interior-content">
            When the DNS health changes, send a notification to the following emails: </span>
            <div class="gf-form">
              <textarea class="gf-form-input max-width-30" type="textarea" ng-model="ctrl.checks['dns'].healthSettings.notifications.addresses"></textarea>
           </div>
            <div>
              <span class="small">Comma separated email addresses accepted.</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="endpoint-config-left-margin" ng-if="ctrl.endpoint.id">
      <div class="gf-form-button-row">
        <button type="submit" class="btn btn-success" ng-click="ctrl.updateCheck(ctrl.checks['dns'])">Update DNS Settings</button>
        <a class="btn btn-link" ng-click="ctrl.cancel()">Cancel</a>
      </div>
    </div>
  </div>
</div>
<!-- End DNS Tab -->
